import React, { useCallback, useRef, useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import { ImageProductSliderProps } from "./type";
import { Swiper as SwiperInstance } from "swiper";
import ImageAtom from "../../Atoms/Image.Atom";
import ImageEnum from "../../Atoms/Image.Atom/enum";
import SwiperCore from "swiper";
import ArrowRightIcon from "../../../shared/icons/arrow-right.svg?react";
import ArrowLeftIcon from "../../../shared/icons/arrow-left.svg?react";
import { FreeMode, Navigation, Thumbs } from "swiper/modules";

SwiperCore.use([Navigation]);

const ImageProductSlider: React.FC<ImageProductSliderProps> = ({ product }) => {
  const { img_paths, title } = product;
  const swiperRef = useRef<SwiperCore>();
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperInstance | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedImage, setSelectedImage] = useState<string | null>(null);

  const handleImageClick = useCallback(
    (image: string) => {
      setSelectedImage(image);
      setIsModalOpen(true);
    },
    [setSelectedImage, setIsModalOpen]
  );

  const closeModal = useCallback(() => {
    setIsModalOpen(false);
  }, [setIsModalOpen]);

  return (
    <section className="bg-black relative">
      <Swiper
        loop={true}
        spaceBetween={10}
        onBeforeInit={(swiper) => {
          swiperRef.current = swiper;
        }}
        thumbs={{
          swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
        }}
        modules={[FreeMode, Thumbs]}
        className="h-96 w-full rounded-lg"
      >
        {img_paths.map((image: string, index: number) => (
          <SwiperSlide key={index}>
            <div
              className="flex h-full w-full items-center justify-center"
              onClick={() => handleImageClick(`/img/${image}.png`)}
            >
              <Image
                src={`/img/${image}.png`}
                alt={title}
                width={500}
                height={500}
                className="block h-full w-full object-contain cursor-pointer"
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* Thumbnail */}
      <Swiper
        onSwiper={setThumbsSwiper}
        spaceBetween={12}
        slidesPerView={4}
        freeMode={true}
        watchSlidesProgress={true}
        modules={[FreeMode, Thumbs]}
        className="thumbs mt-3 h-32 w-full rounded-lg"
      >
        {img_paths.map((image: string, index: number) => (
          <SwiperSlide key={index}>
            <Image
              src={`/img/${image}.png`}
              alt={title}
              width={500}
              height={500}
              className="block h-full w-full object-cover cursor-pointer"
            />
          </SwiperSlide>
        ))}
      </Swiper>
      <div className="absolute bottom-[58%] left-[-10px] z-10 cursor-pointer fill-tiffany active:fill-bg_active hover:fill-bg_hover">
        <ImageAtom
          icon={<ArrowLeftIcon />}
          className="w-14 h-14"
          type={ImageEnum.enum_defaultSvg}
          onClick={() => swiperRef.current?.slidePrev()}
        />
      </div>
      <div className="absolute bottom-[58%] right-[-10px] z-10 cursor-pointer fill-tiffany active:fill-bg_active hover:fill-bg_hover">
        <ImageAtom
          type={ImageEnum.enum_defaultSvg}
          className="w-14 h-14"
          icon={<ArrowRightIcon />}
          onClick={() => swiperRef.current?.slideNext()}
        />
      </div>

      {/* Modal */}
      {isModalOpen && (
        <div className="fixed top-0 left-0 z-50 w-full h-full bg-black bg-opacity-80 flex items-center justify-center">
          <div className="relative w-3/4 h-3/4">
            <button
              className="absolute top-0 right-0 p-4 text-white text-2xl"
              onClick={closeModal}
            >
              &times;
            </button>
            <div className="w-full h-full flex items-center justify-center">
              <Image
                src={selectedImage || ""}
                alt={title}
                width={1000}
                height={1000}
                className="block max-h-full max-w-full"
              />
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

export default ImageProductSlider;
